<template>
    <div class="cent w" :updateStatusData="updateStatusData">
      <div class="listBox clearfix">
        <div class="title">
          <p class="clearfix" style="border-bottom: 1px solid #e1e1e1" :DetailData="DetailData">
            <span class="left"> 订单信息 </span>
            <span class= "right" v-show="fromData.status == 1"><el-button size="mini" style="margin-bottom: 5px" @click="updateOderStatus(2)">确定订单</el-button></span>
          </p>
        </div>
        <div class="list">
          <p><span>订单状态：</span><span> {{fromData.statusText}}</span></p>
          <p><span>下单时间：</span><span> {{fromData.createTime}}</span></p>
          <p><span>订&nbsp 单 &nbsp号：</span><span> {{fromData.number}}</span></p>
          <p><span>联 &nbsp系 &nbsp人：</span><span> {{fromData.cttName}}</span></p>
          <p class="bottom"><span >手 &nbsp机 &nbsp号：</span><span> {{fromData.cttPhone}}</span></p>
        </div>
        <div class="list bottom">
          <p class="addrss"><span v-show="fromData.origin">{{fromData.origin}} —  </span> <span v-show="fromData.transitPort"> {{ fromData.transitPort}} — </span> <span v-show="fromData.dest">{{ fromData.dest}}</span></p>
          <p><span>发车时间：</span><span> 2018-04-24 15：30</span></p>
          <p><span>运输方式：</span><span> {{fromData.transMode}}</span></p>
          <p><span>品名：</span><span> {{fromData.goodsName}}</span></p>
          <p v-show="fromData.weight"><span >重量：</span><span> {{fromData.weight + ' (kg)'}}</span></p>
          <p v-show="fromData.volume"><span>体积：</span><span> {{fromData.volume + ' (m³)'}}</span></p>
          <p v-show="fromData.transitPort"><span >出境口岸：</span><span> {{fromData.transitPort?fromData.transitPort:'-----'}}</span></p>
          <p v-show="fromData.consignSuitcasePoint"><span>提箱点：</span><span> {{fromData.consignSuitcasePoint}}</span></p>
          <p v-show="fromData.consignAddress"><span>拖车门点：</span><span> {{fromData.consignAddress}}</span></p>
          <p class="" v-show="fromData.sendAddress"><span>派送地点：</span><span> {{fromData.sendAddress}}</span></p>
          <!--<div class="imgBoxs">-->
            <!--<img :src="fromData.imgUrl"/>-->
          <!--</div>-->
        </div>
        <prec> </prec>
        <div class="list clearfix" :quotationData="quotationData">

        </div>
      </div>
    </div>
</template>
<style scoped>
  .textRight{line-height: 30px; font-size: 12px;width: 300px}
  .textRight p{font-size: 12px;font-family: "Adobe 宋体 Std L" }
 p{text-align: left}
  .cent .addrss{font-size: 16px;font-weight: bold}
.cent{padding: 40px 0px}
  .listBox{box-sizing: border-box;padding: 20px;border: 1px solid #e1e1e1;}
  .title{color: #606266;font-size:14px}
  .imgBoxs{width: 126px;height: 90px;background-color: #0062a2;overflow: hidden;position: absolute;right:50px ;bottom: 30px}
.imgBoxs img{max-width: 126px;height: 90px}
  .list{box-sizing: border-box;padding: 10px 30px; position: relative}
  .list p{line-height:29px;font-size: 14px}
  .bottom{border-bottom: 1px solid #e1e1e1;padding-bottom: 20px}
  .money{width: 150px;text-align: left}
</style>
<script>
  import setPublc from '@/components/public/set.vue'
  import HeaderPublc from '@/components/public/herderIndex.vue'
  import prec from '@/components/public/prec.vue'
  import Public from '@/vuex/public'
  import {mapState, mapActions} from 'vuex'
  export default {
    name: 'my-adminChart',
    created () {

      // 查看本页面路由 绑定对应页面class
      var name = this.$route.query.id
      this.name = name
      //新增 业务
      this.$store.commit('commitBizDetails',null)
      this.$store.commit('commitQuotation',null)

      this.fromData.id = parseInt(this.$route.query.chartID);
      if(this.fromData.id){
        var parm = {id: this.fromData.id}
        this.quotationDetails(parm)
      }
    },
    data () {
      return {
        id:'',
        width:40,
        fromData:{

        },
        loading:false,
        transitCost:[],
        cost:[]
      }
    },
    methods: {
      ...mapActions({
        quotationDetails: 'quotationDetails',
        findConsign: 'findConsign',
        modifyQuotationOrderStatus:'modifyQuotationOrderStatus'
      }),
      goBack(){
        this.$router.back(-1)
      },
      updateOderStatus(status){
        var parm = {
          orderId :this.fromData.id,
          status: status
        }
        this.modifyQuotationOrderStatus(parm)
      },
      next(a){
        var parm = {
          id:this.fromData.id,
          page:a
        }
        window.scrollTo(0,0);
        this.loading = true;
        this.showNewsDetails(parm)
      },
      clickROrD(str){
        this.fromData.nuit=str
      },
      login () {
        this.$router.push({ name: 'map' })
      },
      //详情解析
      dataFn(res){
        res = res.body.data
        var time = Public.publicLo.timeCheng()
        if(res.createTime){
          time = Public.publicLo.timeCheng(res.createTime)
        }

        var dat= res.transitCost,linePrice='',ctnPrice='',consignPrice='',cvalue='',rate;
        this.transitCost=[];

        for(let i in dat){
          linePrice = this.moneychange(linePrice,dat[i].linePrice,dat[i].linePetty,dat[i].rate)
          ctnPrice = this.moneychange(ctnPrice,dat[i].ctnPrice,dat[i].linePetty,dat[i].rate)
          consignPrice = this.moneychange(consignPrice,dat[i].consignPrice,dat[i].linePetty,dat[i].rate)
          cvalue = this.moneychange(cvalue,dat[i].cvalue,dat[i].linePetty,dat[i].rate)
          rate = dat[0].rate
          this.transitCost.push({
            "id":dat[i].id,
            "volume":dat[i].volume,
            "weight":dat[i].weight,
            "cartonCount":dat[i].cartonCount,
            "ctnOwner":dat[i].ctnOwner == 1? '中铁':dat[i].ctnOwner == 2?'租箱':dat[i].ctnOwner == 3?'买箱':dat[i].ctnOwner == 4?'俄铁':dat[i].ctnOwner == 5?'大洋':'',
            "cartonType":dat[i].cartonType,
            "linePrice":this.moneychange('',dat[i].linePrice,dat[i].nuit,dat[i].rate).R,
            "ctnPrice":this.moneychange('',dat[i].ctnPrice,dat[i].nuit,dat[i].rate).R,
            "consignPrice":this.moneychange('',dat[i].consignPrice,dat[i].nuit,dat[i].rate).R,
            "linePriceD":this.moneychange('',dat[i].linePrice,dat[i].nuit,dat[i].rate).D,
            "ctnPriceD":this.moneychange('',dat[i].ctnPrice,dat[i].nuit,dat[i].rate).D,
            "consignPriceD":this.moneychange('',dat[i].consignPrice,dat[i].nuit,dat[i].rate).D,
            "linePetty":dat[i].linePetty,
            "unit":dat[i].linePetty,
            "rate":dat[i].rate,
            "cvalue":this.moneychange('',dat[i].cvalue,dat[i].nuit,dat[i].rate).R,
            "cvalueD":this.moneychange('',dat[i].cvalue,dat[i].nuit,dat[i].rate).D,
            "remark":dat[i].remark,
            "createTime":dat[i].createTime,
            "updateTime":dat[i].updateTime,

          })
        }
        dat= res.cost
        this.cost=[]
        for (let i in dat){
          var cost =this.moneychange('',dat[i].cost,dat[i].costUnit,rate)
          this.cost.push({
            id:dat[i].id,
            costName:dat[i].costName,
            cost: cost.R,
            costD: cost.D
          })
        }
        cvalue = this.moneychange('',res.cvalue,2,rate)
        this.fromData = {
          "id":res.id,
          "number":res.number,// 订单号
          "customerName":res.customerName,// 公司名称
          "cttName":res.cttName,// 联系人
          "cttPhone":res.cttPhone,//联系人电话
          consignAddress:res.consignAddress,
          sendAddress:res.sendAddress,
          "bizType":res.bizType==1?'班列':res.bizType==2?'直发':res.bizType==3?'中转':res.bizType==4?'海铁联运':'异常',//运输类型
          "origin":res.origin|| '',//起始的
          "dest":res.dest || '',//目的地
          "status":res.status,
          statusText:res.status == 1?'待确认':res.status == 2?'已确认':res.status == 3?'已提交委托书':res.status == 4?'已付款':res.status == 5?'在途运输':res.status == 6?'运输完成':res.status == 7?'已失效':'异常',

          "cartonType":res.cartonType,//箱型
          "cartonCount":res.cartonCount,//箱量
          "transitPort":Public.publicLo.getCityById(res.transitPort).cityCN || '',//过境
          "createTime":Public.publicLo.timeCheng(res.createTime).ymd || '', //下单时间
          linePrice:linePrice.R,
          ctnPrice:ctnPrice.R,
          consignPrice:consignPrice.R,
          cvalue:cvalue.R,
          linePriceD:linePrice.D,
          ctnPriceD:ctnPrice.D,
          consignPriceD:consignPrice.D,
          cvalueD:cvalue.D,
          nuit:'$',
          transMode:res.transMode,
          imgUrl:res.imgUrl,
          consignSuitcasePoint:res.consignSuitcasePoint,
          goodsName:res.goodsName,
    }
    if(this.transitCost[0].volume){
      this.fromData.volume = this.transitCost[0].volume
      this.fromData.weight = this.transitCost[0].weight
      this.fromData.TR = this.fromData.weight/500 > this.transitCost[0].volume ? this.fromData.weight/500 : this.transitCost[0].volume
    }
  },
      // 价格转换
      moneychange(arr,number,a,reta){
        var c = reta
        var res = arr ||{
          'R':0,
          'D':0
        }

        if(!number){
          return res
        }else {
          number = parseFloat(number)
        }
        if(a==1){
          res.R =  parseFloat(res.R) +parseFloat(number) ;
          res.D =  parseFloat(res.D)+ parseFloat((number/c).toFixed(2))
        }
        if(a!=1){
          res.D = parseFloat(res.D)+parseFloat(number) ;
          res.R =parseFloat(res.R)+parseFloat((number*c).toFixed(2))
        }

        res.reta = reta

        return res
      },
      //价格
      quotationDetailFn(res){

        res = res.body.data
        this.prceChart = {
          "quotationId":res.quotationId,
          "escortFeeCount":res.escortFeeCount,// 押运费用
          "lineQuotationCount":res.lineQuotationCount,//线路运输费用
          "ctnQuotationCount":res.ctnQuotationCount,//箱总价
          "consignQuotationCount":res.consignQuotationCount,//拖车总价
          "quotationCount":res.quotationCount, // 询价结果
          "unit":"￥"
        }
      },
      // 操作是否成功
      listStatus (res) {
        if (res.status == 0) {
          // 修改成功
          var text = '';

          if(res.code == 'modifyQuotationOrderStatus'){
            var parm = {
              id: parseInt(this.$route.query.id)
            }
            this.quotationDetails(parm);
          }

          // if(!this.fromData.id){
          //   this.fromData.id = res.data.id
          // }else {
          //
          // }
          // this.from={
          //   id:'',
          //   costName:'',
          //   orderId:'',
          //   cost:'',
          //   unit:2,
          //   fromType:""
          // }
          // 刷新列表

        }
        if (res.status != 0) {
          // 修改 修改失败
          var text = '添加失败';
          this.openError(text)
        }
        // 清空 vuex 中的本次记录，以免被下次操作状态造成混淆
        //this.$store.commit('updateStatusTo', {body: null})
      },
    },
    computed: {
      DetailData() {
        var parm = this.Detail
        this.loading = false
        if (parm) {
          this.dataFn(parm)
        }
        return 1
      },
      quotationData: function () {
        var parm = this.quotationDetail;
        if(parm){
          this.quotationDetailFn(parm)
        }
        return 1
      },
      updateStatusData: function () {
        var parm = this.updateStatus
        if (parm) {
          if(parm== 'out'|| parm=='outErorr'){

          }else {
            this.listStatus(parm)
          }
        }
        return 1
      },
      ...mapState([
        'Detail',
        'updateStatus',
        'language',
        'quotationDetail',

      ])
    },
    mounted () {
      // var width = document.body.clientWidth;
      // var dom = document.getElementById('main');
      // var w = width-240;
      // dom.style = 'max-width:'+ w +'px';
      var parm = {
        id: parseInt(this.$route.query.id)
      }
      this.quotationDetails(parm)
      this.findConsign(parm)
      window.scrollTo(0,0);
    },
    components: {
      HeaderPublc: HeaderPublc,
      setPublc:setPublc,
      prec:prec
    }
  }
</script>

